<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="description" content="" />
    <title>结束项目</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/css.css" rel="stylesheet" type="text/css">
    <link href="css/Animation.css" rel="stylesheet" type="text/css">
    <link href="css/slider.css" rel="stylesheet" type="text/css">
    <link href="/layui/css/layui.css" rel="stylesheet" type="text/css">
    <script src="/layui/layui.js"></script>
    <link rel="icon" href="images/icon.ico">
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/slider.js" type="text/javascript"></script>
    <script src="js/html5.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/wow.min.js" type="text/javascript"></script>
    <link href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/jquery.js"></script>
    <script src="js/html5.js"></script>
    <style type="text/css">
        * {margin: 0px;padding: 0px;}
        #otr{background-color: skyblue;width: 400px;border: 1px solid red;text-align: center;}
        #otr thead tr th{padding: 20px;text-align: center;font-size: 20px;}
        #issus{font-size: 50px;padding: 10px;color: blue;background-color: navajowhite;font-weight: bold;text-rendering: optimizelegibility;}
        #div1{width: 400px; height: 400px; border: 1px solid black; position: absolute; left: 100px; top: 100px; display: none}
        #div1 .title{width: 400px; height: 50px; background-color: orange; position: relative;}
        #txt1{width: 298px; height: 248px; }
        #div1 .title button{ height: 50px; width: 70px; font-size: 30px; }
        #close{right: 0px; position: absolute;}
        #container0{width: 100%;height:700px ;position: relative;height: 600px;}
        #container1{position: absolute;margin-top: 150px;margin-left: 225px;}
        #oh3{line-height: 30px;font-size: 24.5px;font-family: inherit;font-weight: bold;line-height: 20px;color: inherit;text-rendering: optimizelegibility;}
        #foot0{font-size: 50px;float: left}
        #start0{font-size: 30px}
        #oslide{margin: -38px -1px;font-size: 25px; text-align: center;width:601px;background-color: skyblue}
        #slide{width: 600px; height: 30px; border: 1px solid black; margin: 200px auto; position: relative;}
        #full{width: 0px; height: 30px; background-color: orange; position: absolute;left: 0px; top: 0px}
        #score{position: absolute; top: 30px}
        #toTop{
            width: 50px;
            height: 65px;
            border: 1px solid black;
            background-color: #f3f6f6;
            opacity: 0.5;
            text-align: center;
            position: fixed;
            right: 80px;
            bottom: 0px;
        }
    </style>
    <script type="text/javascript">
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true
        });
        wow.init();
        //
        $(function () {

            var issus=document.getElementById("issus");
            var close= document.getElementById("close");
            var div1=document.getElementById("div1");

            issus.onclick = function(){
                div1.style.display = "block";
            }
            close.onclick = function(){
                div1.style.display = 'none';
            }
            drag(div1);
            //其他页面进入这个页面的入口
            /*$("#end").click(function () {
                $.get({
                    url: '/接口',
                    success: function (res) {
                        if (res) {
                            layer.msg("正在打开您所创建的项目", {time: 1000}, function () {
                                location.href="/End_project";
                            });
                        } else{
                            layer.msg("您还没创建项目,请先创建项目!", {time: 1000}, function () {
                                //关闭后想做些什么
                                //当前页面打开URL页面
                                location.href="/publish";
                            });
                        }
                    }
                });
            })*/
            //
            function drag(node){
                var offsetX = 0;
                var offsetY = 0;

                node.onmousedown = function(ev){
                    var e = ev || window.event;
                    //记录相对距离
                    offsetX = e.clientX - node.offsetLeft;
                    offsetY = e.clientY - node.offsetTop;

                    //编写拖拽
                    document.onmousemove = function(ev){
                        var e = ev || window.event;
                        node.style.left = e.clientX - offsetX + 'px';
                        node.style.top = e.clientY - offsetY + 'px';

                    }

                }
                document.onmouseup = function(){
                    document.onmousemove = null;

                    ++++++++
                }
            }

            var btn_end=document.getElementById("btn_end");

            //Bar_parameters 是进度条参数后端查询数据库 前端获取
            var Bar_parameters= "${Bar_parameters}";
            var cheshi=document.getElementById("cheshi");
            cheshi.onclick=function(){
                    layer.confirm('确定要结束该项目吗',
                        {
                            btn:["确定","取消"],
                            btn1:function (index) {
                                var oSlide = document.getElementById("slide");
                                var oFull = document.getElementById("full");
                                var oScore = document.getElementById("score");
                                layer.close(index)
                                div1.style.display = 'none';
                                //为节点添加css样式
                                function setStyle(node, jsonObj) {
                                    for (var attr in jsonObj) {
                                        node.style[attr] = jsonObj[attr];
                                    }
                                }
                                function getStyle(node, cssStyle){
                                    if(node.currentStyle){
                                        return node.currentStyle[cssStyle];
                                    }else{
                                        return getComputedStyle(node)[cssStyle];
                                    }
                                }
                                var Bar_parameters=5;
                                var timer = setInterval(function () {
                                    //改变填充部分的宽
                                    //1、获取当前的宽
                                    var iCur = parseInt(getStyle(oFull, "width"));

                                    if (iCur==305) {
                                        alert("达到结束项目要求,请点击结束按钮!");
                                        clearInterval(timer);
                                        var btn=document.createElement("button");
                                        setStyle(btn,{
                                            position:"absolute",
                                            top:"100px",
                                            left:"100px",
                                            width:"100px",
                                            height:"30px",
                                            backgroundColor:"white"
                                        })
                                        btn.innerText="结束";
                                        oSlide.appendChild(btn);
                                        btn.onclick=function () {
                                            location.href='http://www.baidu.com';
                                        }
                                    } else if(iCur==600){
                                        clearInterval(timer);
                                    } else {
                                        oFull.style.width = iCur + Bar_parameters + 'px';
                                    }

                                    oScore.innerHTML = "投票进度"+parseInt((iCur / 600) * 100) + "%";

                                }, 30);
                                btn2: layer.close()
                            }
                            })

            }
        })
    </script>

</head>

<body>
<!--索引-->
<header class="navbar-fixed-top headerbg">
    <div class="container-fluid">
        <div class="logo">
            <h3 id="oh3"><a href="#"><span id="start0">朋心合力</span></a></h3>
        </div>
        <div class="navBox hidden-xs hidden-sm">
            <ul class="navList list-unstyled">
                <li class="navLi">
                    <h3><a href="/index"><span>首页</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="/publish"><span>项目发布</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="/course"><span>课程学习</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="/lookingprojects"><span>项目广场</span></a></h3>
                    <div class="navSub">
                        <ul class="navSubList list-unstyled">
                            <li class="navSubLi">
                                <h4><a href="/lookingtalents">● 寻找合伙人</a></h4>
                            </li>
                            <li class="navSubLi">
                                <h4><a href="/lookingprojects">● 寻找项目</a></h4>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="navLi on">
                    <h3><a href="/userInformation"><span>个人主页</span></a></h3>
                </li>
            </ul >
        </div>
    </div>
</header>
<!--轮播动画-->
<div class="banner1" id="container0">
    <div id="container1">
        <!--
            每次点击结束项目时
            查找数据库判断是否有创建项目,没有就弹框提醒你还没创建项目,有的话再开始下一步.
            传递一个true or false到前端
            例如
            String rulemodeid=req.getParameter("rulemodeid");
            req.setAttribute("rulemodeid", rulemodeid);

            然后组长选择要发布结束的项目,组员的投票时间,时间一到,默认同意结束.
            选择完成之后,前端立马生成进度条,当进度条达到一半,才能出现确认结束按钮,组长才能执行结束功能
            组长发布结束,组员收到并开始投票,每投一票数据库字段加1,返回给前端,前端根据字段长度,改变进度条的长度


        -->
        <button id="cheshi">测试</button>
        <button id = 'issus'>选择结束项目</button>
        <div id = 'div1'>
            <div class = 'title'>
                <button id = 'close'>X</button>
            </div>
            <div id="txt1">
                <table id="otr">
                    <thead>
                    <tr>
                        <th>项目编号</th>
                        <th>项目名称</th>
                        <th>是否结束</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="masterList:${isMasterList}">
                        <td>
                            <div>[[${masterList.projectId}]]</div>
                        </td>
                        <td>[[${masterList.projectName}]]</td>
                        <td>
                            //结束项目的接口(发送投票信息到组员,)
                            <a  th:href="' '+${memberList.projectId}" class="btn btn-sm btn-info" id="btn_end">结束</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id = 'slide'>
            <div id="oslide">投票进度</div>
            <div id = 'full'></div>
            <div id = 'score'>投票进度0%</div>
        </div>
    </div>
</div>
<!--底部样式-->
<footer class="footerBg">
    <div class="container">
        <div class="ptb40">
            <div class="footTopL">
                <dl class="clearfix" style="width: 400px; margin-left: 60px;">
                    <dt>关于我们</dt>
                    <dd><a href="#">联系地址</a></dd>
                    <dd><a href="#">荣誉资质</a></dd>
                    <dd><a href="#">加入我们</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 80px;">
                    <dt>系统团队</dt>
                    <dd><a href="#">林某</a></dd>
                    <dd><a href="#">李某</a></dd>
                    <dd><a href="#">蔡某</a></dd>
                    <dd><a href="#">周某</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 100px;">
                    <dt>培训中心</dt>
                    <dd><a href="#">java类培训</a></dd>
                    <dd><a href="#">c/c++类培训</a></dd>
                    <dd><a href="#">Python类培训</a></dd>
                    <dd><a href="#">go语言类培训</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 80px;">
                    <dt>权限介绍</dt>
                    <dd><a href="#">队长权限</a></dd>
                    <dd><a href="#">队员权限</a></dd>
                    <dd><a href="#">惩罚机制</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="CopyRight">
        <div class="container"><span class="footer_logo"><img src="images/footer_logo.png"></span><span
                class="CopyRight_name">朋心合力平台版权所有</span></div>
    </div>
</footer>
<div id="toTop">
    <i class="arrow up icon">
    </i>
    <p style="margin-top: 10px">&nbsp;返回顶部</p>
</div>
<script type="text/javascript">
    window.onload=function () {
        var oToTop=document.getElementById("toTop");
        oToTop.onclick=function () {
            document.documentElement.scrollTop="0px";
            document.body.scrollTop="0px";
        }
    }
</script>

</body>

</html>
